<template>
    <div class="jx-index-container">
        <!-- <div class="jx-index-banner">
            <img src="./../../assets/images/banner2.jpg" />
        </div> -->
        <div class="jx-index-banner-info">
            <div class="jx-index-banner-info-box">
                <el-row>
                    <el-col :span="8">
                        <div class="jx-index-banner-text">
                            <div class="jx-index-banner-text-item">
                                <span>正教授的班级</span>
                                <p>05</p>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item">
                                <span>正教授的学生</span>
                                <el-dropdown trigger="click">
                                    <span class="el-dropdown-link">
                                        35
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>大数据一班</el-dropdown-item>
                                        <el-dropdown-item>大数据二班</el-dropdown-item>
                                        <el-dropdown-item>大数据三班</el-dropdown-item>
                                        <el-dropdown-item>大数据四班</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="jx-index-banner-content">
                            <div class="jx-index-banner-content-avatar">
                                <img src="./../../assets/images/re-zip3.png" />
                            </div>
                            <div class="jx-index-banner-content-tips">早安，王老师，祝你开心每一天！</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="jx-index-banner-text">
                            <div class="jx-index-banner-text-item">
                                <span>待审批作业/报告</span>
                                <p>56</p>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item">
                                <span>待批阅试卷</span>
                                <p>70</p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="jx-index-content">
            <div class="jx-content-title">
                <div class="jx-content-title-hd">
                    <h1>
                        <p>MAIN COURSE</p>
                    </h1>
                </div>
                <span>核心课程</span>
            </div>
            <div class="jx-course-list" :class="{ 'jx-course-list-login': courseListLoginActive}">
                <el-carousel indicator-position="none" :autoplay="false" ref="carousel" :height="listHeight1" arrow="never">
                    <el-carousel-item v-for="item in 4"  :key="item">
                        <el-row :gutter="40">
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                        </el-row>
                    </el-carousel-item>
                </el-carousel>
                <button class="jx-course-list-button prev" @click="prev"><i class="iconfont icon-xiangzuo-copy"></i></button>
                <button class="jx-course-list-button next" @click="next"><i class="iconfont icon-xiangyou"></i></button>
            </div>
            <div class="jx-content-title">
                <div class="jx-content-title-hd" style="width:558px;">
                    <h1>
                        <p>EXTENDED COURSE</p>
                    </h1>
                </div>
                <span>扩展课程</span>
            </div>
            <div class="jx-course-list" :class="{ 'jx-course-list-login': courseListLoginActive}">
                <el-carousel indicator-position="none" :autoplay="false" ref="carousel" :height="listHeight1" arrow="never">
                    <el-carousel-item v-for="item in 4"  :key="item">
                        <el-row :gutter="40">
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="jx-course-box">
                                    <img src="./../../assets/images/course_icon.png" />
                                    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
                                        <i class="iconfont icon-wode"></i>
                                    </el-tooltip>
                                    <i class="iconfont icon-tianjia-"></i>
                                </div>
                                <div class="jx-course-text-title" v-if="courseListLoginActive">
                                    预置
                                </div>
                                <div class="jx-course-text">
                                    分布式计算框架Spark
                                </div>
                            </el-col>
                        </el-row>
                    </el-carousel-item>
                </el-carousel>
                <button class="jx-course-list-button prev" @click="prev"><i class="iconfont icon-xiangzuo-copy"></i></button>
                <button class="jx-course-list-button next" @click="next"><i class="iconfont icon-xiangyou"></i></button>
            </div>
            <div class="jx-content-title">
                <div class="jx-content-title-hd" style=" width: 778px;">
                    <h1>
                        <p>BIG DATA TECHNOLOGY LIBRARY</p>
                    </h1>
                </div>
                <span>大数据技术库</span>
            </div>
            <div class="jx-course-list2">
                <el-carousel indicator-position="none" :autoplay="false" ref="carousel" height="270px" arrow="never">
                    <el-carousel-item v-for="item in 4"  :key="item">
                        <el-row :gutter="20">
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-hover-box">
                                        <div class="jx-course-hover-box-img">
                                            <img src="./../../assets/images/course_icon2_hover.jpg" />
                                        </div>
                                        <div class="jx-course-hover-box-text">使用pythone实现神经网络</div>
                                        <div class="jx-course-hover-box-num">198</div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-hover-box">
                                        <div class="jx-course-hover-box-img">
                                            <img src="./../../assets/images/course_icon2_hover.jpg" />
                                        </div>
                                        <div class="jx-course-hover-box-text">使用pythone实现神经网络</div>
                                        <div class="jx-course-hover-box-num">198</div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-hover-box">
                                        <div class="jx-course-hover-box-img">
                                            <img src="./../../assets/images/course_icon2_hover.jpg" />
                                        </div>
                                        <div class="jx-course-hover-box-text">使用pythone实现神经网络</div>
                                        <div class="jx-course-hover-box-num">198</div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-hover-box">
                                        <div class="jx-course-hover-box-img">
                                            <img src="./../../assets/images/course_icon2_hover.jpg" />
                                        </div>
                                        <div class="jx-course-hover-box-text">使用pythone实现神经网络</div>
                                        <div class="jx-course-hover-box-num">198</div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-hover-box">
                                        <div class="jx-course-hover-box-img">
                                            <img src="./../../assets/images/course_icon2_hover.jpg" />
                                        </div>
                                        <div class="jx-course-hover-box-text">使用pythone实现神经网络</div>
                                        <div class="jx-course-hover-box-num">198</div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-hover-box">
                                        <div class="jx-course-hover-box-img">
                                            <img src="./../../assets/images/course_icon2_hover.jpg" />
                                        </div>
                                        <div class="jx-course-hover-box-text">使用pythone实现神经网络</div>
                                        <div class="jx-course-hover-box-num">198</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-carousel-item>
                </el-carousel>
                <button class="jx-course-list-button prev" @click="prev"><i class="iconfont icon-xiangzuo-copy"></i></button>
                <button class="jx-course-list-button next" @click="next"><i class="iconfont icon-xiangyou"></i></button>
            </div>
            <div class="jx-content-title">
                <div class="jx-content-title-hd" style=" width: 787px;">
                    <h1>
                        <p>BIG DATA INDUSTRY CASELIBRARY</p>
                    </h1>
                </div>
                <span>大数据行业案例库</span>
            </div>
            <div class="jx-course-list3">
                <el-carousel indicator-position="none" :autoplay="false" ref="carousel" height="190px" arrow="never">
                    <el-carousel-item v-for="item in 4"  :key="item">
                        <el-row :gutter="20">
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-box-num">50</div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-box-num">50</div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-box-num">50</div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-box-num">50</div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-box-num">50</div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="jx-course-box">
                                    <div class="jx-course-box-img">
                                        <img src="./../../assets/images/course_icon2.jpg" />
                                    </div>
                                    <div class="jx-course-box-text">MR处理</div>
                                    <div class="jx-course-box-num">50</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-carousel-item>
                </el-carousel>
                <button class="jx-course-list-button prev" @click="prev"><i class="iconfont icon-xiangzuo-copy"></i></button>
                <button class="jx-course-list-button next" @click="next"><i class="iconfont icon-xiangyou"></i></button>
            </div>
        </div>
        <!-- <bread-crumb /> -->
        <!-- 我的首页
        <router-link to="/courseDetail">课程详情</router-link> -->
    </div>
</template>

<script>
    import BreadCrumb from '@/components/BreadCrumb.vue'
    export default {
        components: {
            BreadCrumb,
        },
        data () {
            return {
                courseListLoginActive: true,
                listHeight1: '370px'
            }
        },
        created () {
            if (this.courseListLoginActive) {
                this.listHeight1 = '440px'
            }
        },
        methods: {
            // 下一页
            next(){
                this.$refs.carousel.next();
            },
            // 上一页
            prev(){
                this.$refs.carousel.prev();
            },
        }
    }
</script>

<style lang="scss" scoped>
.jx-index-banner{
    img{
        width: 100%;
    }
}
.jx-index-banner-info{
    width: 100%;
    height: 370px;
    background: #111b3a;
    .jx-index-banner-info-box{
        width: 1200px;
        margin: 0 auto;
        .jx-index-banner-text{
            width: 224px;
            margin: 175px auto 0;
            .jx-index-banner-text-xian{
                float: left;
                width: 1px;
                height: 32px;
                background: rgba(255,255,255,.5);
                margin: 10px 18px 0;
            }
            .jx-index-banner-text-item{
                float: left;
                color: #fff;
                text-align: center;
                span{
                    font-size: 14px;
                }
                p{
                    margin-top: 10px;
                    font-size: 26px;
                }
                .el-dropdown{
                    margin-top: 10px;
                    span{
                        font-size: 26px;
                        color: #fff;
                    }
                }
            }
        }
        .jx-index-banner-content{
            .jx-index-banner-content-avatar{
                width: 94px;
                height: 94px;
                border-radius: 50px;
                overflow: hidden;
                margin: 55px auto 0;
            }
            .jx-index-banner-content-tips{
                font-size: 24px;
                color: #fff;
                text-align: center;
                margin-top: 24px;
            }
        }
    }
}
.jx-index-content{
    position: relative;
    overflow: hidden;
    width: 1200px;
    margin: -90px auto 98px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 3px 0 21px rgba(0,0,0,.13);

    .jx-content-title{
        margin-top: 70px;
        .jx-content-title-hd{
            width: 484px;
            margin: 0 auto;
            border-top: 1px solid #cfcfcf;
            h1{
                font-size: 16px;
                margin: -18px auto 0;
                padding: 0 40px;
                background-color: #fff;
                display: table;
                p{
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    font-size: 30px;
                    color: rgba(96, 96, 96, .3);
                    font-weight: 300;
                }
            }
        }
        span{
            font-weight: 500;
            display: block;
            margin-top: 10px;
            text-align: center;
            font-size: 20px;
            color: #474747;
        }
    }

    .jx-course-list-button{
        position: absolute;
        cursor: pointer;
        &.prev{
            left: -80px;
        }
        &.next{
            right: -80px;
        }
        i{
            font-size: 44px;
            color: #d9d9d9;
        }
        &:hover{
            i{
                color:#757575;
            }
        }
    }
    .jx-course-list{
        position: relative;
        width: 1000px;
        margin: 60px auto 0;
        padding-bottom: 40px;
        &.jx-course-list-login{
            .jx-course-text-title{
                text-align: center;
                font-size: 16px;
                color: #323232;
                margin-top: 23px;
            }
            .jx-course-text{
                margin-top: 15px;
            }
            .jx-course-list-button{
                top: 168px;
            }
        }
        .el-col{
            margin-bottom: 36px;
        }
        .jx-course-box{
            position: relative;
            width: 100%;
            height: 130px;
            line-height: 130px;
            background: #3e4562;
            border-radius: 5px;
            text-align: center;
            // box-shadow: 8px 0 20px rgba(0, 0, 0, .44);
            overflow: hidden;
            i{
                position: absolute;
                line-height: 1;
                right: 12px;
                color: #fff;
                display: block;
                // display: none;
                &.icon-wode{
                    top: 10px;
                }
                &.icon-tianjia-{
                    bottom: 10px;
                }
            }
            img{
                // width: 100%;
            }
        }
        .jx-course-text{
            text-align: center;
            font-size: 16px;
            color: #323232;
            margin-top: 20px;
        }
        .jx-course-list-button{
            top: 135px;
        }
    }
    .jx-course-list2{
        position: relative;
        width: 1000px;
        margin: 60px auto 0;
        padding-bottom: 40px;
        .el-row{
            height: 100%;
            .el-col{
                height: 100%;
            }
        }
        .jx-course-box{
            position: relative;
            width: 100%;
            height: 100%;
            border: dashed 1px #bfbfbf;
            box-sizing: border-box;
            background: #f9f9f9;
            cursor: pointer;
            .jx-course-box-img{
                margin-top: 65px;
                height: 46px;
                line-height: 46px;
                text-align: center;
            }
            .jx-course-box-text{
                margin-top: 35px;
                padding: 0 20px;
                font-size: 16px;
                line-height: 24px;
                height: 75px;
                color: #545454;
                text-align: center;
                font-weight: bold;
                word-break:break-all;
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
            &:hover{
                border: solid 1px #385899;
                .jx-course-hover-box{
                    opacity: 1;
                }
            }
            .jx-course-hover-box{
                position: absolute;
                top: 1px;
                right: 1px;
                left: 1px;
                bottom: 1px;
                text-align: center;
                background: #fff;
                opacity: 0;
                transition: .5s;
                .jx-course-hover-box-img{
                    margin-top: 47px;
                    height: 46px;
                    line-height: 46px;
                }
                .jx-course-hover-box-text{
                    width: 70%;
                    margin: 10px auto 0;
                    font-size: 16px;
                    color: #385899;
                    line-height: 24px;
                    text-align: center;
                    word-break:break-all;
                    overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .jx-course-hover-box-num{
                    width: 48px;
                    margin: 25px auto 0;
                    padding-top: 30px;
                    border-top: solid 1px #385899;
                    color: #385899;
                    font-size: 16px;
                    text-align: center;
                }
            }
        }
        .jx-course-list-button{
            top: 115px;
        }
    }
    .jx-course-list3{
        position: relative;
        width: 1000px;
        margin: 60px auto 0;
        padding-bottom: 40px;
        .el-row{
            height: 100%;
            .el-col{
                height: 100%;
            }
        }
        .jx-course-box{
            position: relative;
            width: 100%;
            height: 100%;
            border: solid 1px #bfbfbf;
            box-sizing: border-box;
            background: #fff;
            border-radius: 5px;
            cursor: pointer;
            transition: .5s;
            .jx-course-box-img{
                margin-top: 38px;
                height: 46px;
                line-height: 46px;
                text-align: center;
            }
            .jx-course-box-text{
                margin-top: 15px;
                padding: 0 20px;
                font-size: 16px;
                height: 20px;
                line-height: 20px;
                color: #3e4562;
                text-align: center;
                font-weight: bold;
                word-break:break-all;
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
            .jx-course-box-num{
                margin-top: 18px;
                text-align: center;
                font-size: 20px;
                color: #3e4562;
                font-weight: bold;
            }
            &:hover{
                border: solid 1px #3e4562;
                background: #3e4562;
                .jx-course-box-num, .jx-course-box-text{
                    color: #fff;
                }
            }
        }
        .jx-course-list-button{
            top: 70px;
        }
    }
}
</style>
